<html>
<head>
<meta charset="UTF-8" />
<script>
  const showMessage = () => {
    const message = document.getElementById('message_input').value
    // 调用一个 C++ 注册过的方法
    NimCefWebInstance.call('ShowMessageBox', { message }, (error, result) => {
      console.log(result)
    })
  }
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
    <h1 class="text-center">CEF 控件示例</h1>
    <h3 class="text-center">演示如何在 Duilib 中使用 CEF 控件</h3>
    <div class="input-group">
      <input type="text" id="message_input" class="form-control" placeholder="输入内容发送给 C++ 接收">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="showMessage()">发送</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>